<template>
  <div class="je-admin-sider-menu-search">
    <Search @search="onSearch" @select="onSelect" />
  </div>
</template>
<script>
  import { defineComponent, computed } from 'vue';
  import { Search } from '@jecloud/ui';
  import { useMenuStore } from '@/stores/menu-store';
  import { pinyin } from '@jecloud/utils';
  import { openMenu } from '@/hooks/use-menu';
  export default defineComponent({
    name: 'AdminSiderMenuSearch',
    components: { Search },
    props: {
      menuType: String,
      menuId: String,
    },
    setup(props) {
      const menuStore = useMenuStore();
      const reallyMenus = [];
      const menus = computed(() => {
        if (menuStore.init)
          switch (props.menuType) {
            case 'sider':
              menuStore.getSiderMenusByTopMenu(props.menuId)?.forEach((menu) => {
                reallyMenus.push(...menu.getReallyMenus());
              });
              return reallyMenus;
            case 'star':
              return menuStore.computeStarMenus;
            case 'history':
              return menuStore.computeHistoryMenus;
          }
        return [];
      });

      // 选中
      const onSelect = (val, option) => {
        openMenu(option.id);
      };
      // 查询关键字
      const onSearch = (keyword, resolve) => {
        const items = [];
        keyword = keyword.toLocaleLowerCase();
        menus.value.forEach((item) => {
          const text = item.text?.toLocaleLowerCase() ?? '';
          const pinyinText = pinyin(text, 'pinyin');
          if (text.includes(keyword) || pinyinText.includes(keyword)) {
            items.push({
              id: item.id,
              label: item.text,
              icon: item.icon,
            });
          }
        });
        resolve(items);
      };

      return { onSearch, onSelect };
    },
  });
</script>
<style lang="less">
  .je-admin-sider-menu-search {
    width: 100%;
    padding: 10px 14px;
    position: absolute;
    top: 0;
    left: 0;
    .je-search {
      width: 100%;
      overflow: hidden;
      .ant-input-affix-wrapper,
      .ant-input {
        transition: none;
        border: none;
        box-shadow: none;
      }
    }
  }
</style>
